<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="info">
        <div class="info-block">
          <dl class="dl-horizontal">
            <dt>课程ID</dt>
            <dd>{{curCourse.id}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>教师ID</dt>
            <dd>{{curCourse.teacher_id}}</dd>
          </dl>
        </div>
        <div class="info-block">
          <dl class="dl-horizontal">
            <dt>课程名称</dt>
            <dd>{{curCourse.title}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>年级类型</dt>
            <dd>{{gradeTypeToString(curCourse.grade_type)}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>科目</dt>
            <dd>{{curCourse.subject_info}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>课时数</dt>
            <dd>{{curCourse.lesson_count}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>价格</dt>
            <dd>{{curCourse.price}}(元)</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>开课时间</dt>
            <dd>{{curCourse.start_time}}</dd>
          </dl>
           <dl class="dl-horizontal">
            <dt>结课时间</dt>
            <dd>{{curCourse.end_time}}</dd>
          </dl>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="info">
        <div class="info-block">
          <dl class="dl-horizontal">
            <dt>聊天群号</dt>
            <dd>{{curCourse.easemob_group_id}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>点赞数</dt>
            <dd>{{curCourse.praise_count}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>学生数</dt>
            <dd>{{curCourse.student_count}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>浏览量</dt>
            <dd>{{curCourse.view_count}}</dd>
          </dl>
        </div>
        <div class="info-block">
          <dl class="dl-horizontal">
            <dt>审核状态</dt>
            <dd>
              {{verifyStatus}}
              <el-button v-if="curCourse.verify_status===1" size="mini" type="text" @click="handleAction('noPass',curCourse.id)">取消通过</el-button>
              <el-button v-else type="text" size="mini" @click="handleAction('pass',curCourse.id)">通过审核</el-button>
            </dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>是否首页推荐</dt>
            <dd>
              {{isInFirst}}
              <el-button v-if="curCourse.in_first===1" type="text" size="mini" @click="handleEditInFirst(false)">改为否</el-button>
              <el-button v-else type="text" size="mini" @click="handleEditInFirst(true)">改为是</el-button>
            </dd>
          </dl>
           <dl class="dl-horizontal">
            <dt>发布时间</dt>
            <dd>{{curCourse.create_time}}</dd>
          </dl>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <img alt="" :src="curCourse.title_image">
    </el-col>
  </el-row>
</template>

<script>
  import Mixin from './course-mixin'
  import API from '../../api'

  export default {
    mixins: [Mixin],
    props: ['curCourse'],
    computed: {
      isInFirst: function () {
        return this.inFirstToString(this.curCourse.in_first)
      },
      verifyStatus: function () {
        return this.statusToString(this.curCourse.verify_status)
      }
    },
    methods: {
      handleEditInFirst: function (result) {
        var params = { id: this.curCourse.id }
        if (result) {
          params.in_first = 1
        } else {
          params.in_first = 0
        }
        API.courseInFirst(params,
          (data) => {
            if (!data) return
            this.curCourse.in_first = params.in_first
          }
        )
      },
      handleAction: function (action, selectDataId) {
        let params = {
          id: selectDataId
        }
        switch (action) {
          case 'pass': params.verify_status = 1; break
          case 'noPass': params.verify_status = 2; break
          default: break
        }
        API.courseVerify(params, (data) => {
          if (!data) return
          this.curCourse.verify_status = params.verify_status
        })
      }
    }
  }

</script>

<style scoped>
  .info {
    padding: 5px 10px;
  }
  .info-block {
    margin-bottom: 20px
  }
  .info:last-child {
    margin-bottom: 0px
  }
  dt {
    width: 170px;
  }
  dd {
    margin-left: 180px;
  }
</style>
